<template>
  <default-layout>
    <header-back text="养老缴费基数变更" slot="header"></header-back>
    <div slot="main">
      <transition name="fade" mode="out-in">
        <div key="form" v-if="status === 'form'">
          <div class="form-list">
            <div class="form-list-item">
              <span class="label">姓名：</span>
              <span class="content">{{userInfo.aac003}}</span>
            </div>
            <div class="form-list-item">
              <span class="label">身份证号：</span>
              <span class="content">{{userInfo.idCard}}</span>
            </div>
            <div class="form-list-item">
              <span class="label">档案号：</span>
              <span class="content">{{userInfo.archiveCode}}</span>
            </div>
          </div>
          <div class="form">
            <yd-cell-group>
              <yd-cell-item>
                <span slot="left" class="label required">缴费基数：</span>
                <xf-picker
                  v-model="form.declarationBaseId"
                  ref="declarationBaseId"
                  :list="decla"
                  slot="right"
                  :valid="[{required: true, msg: '请选择缴费基数'}]"
                  placeholder="请选择缴费基数"></xf-picker>
              </yd-cell-item>
              <yd-cell-item>
                <span slot="left" class="label required">备注：</span>
                <yd-textarea v-model.trim="form.description" slot="right" placeholder="请输入备注信息" maxlength="150"></yd-textarea>
              </yd-cell-item>
            </yd-cell-group>
            <div class="next">
              <mt-button size="large" type="primary" @click="onSubmit">提交</mt-button>
            </div>
          </div>
        </div>
        <modify-success key="success" v-if="status === 'success'"></modify-success>
      </transition>
    </div>
    <transition name="router" mode="out-in">
      <router-view class="fixed-router"></router-view>
    </transition>
  </default-layout>
</template>
<script>
  import HeaderBack from '../../../components/header-back/header-back.vue'
  import XfPicker from '../../../components/xf-picker/xf-picker.vue'
  import ModifySuccess from './success.vue'
  import DefaultLayout from '../../../layouts/default-layout/default-layout'
  import {validate} from '../../../common/js/util'
  import {dics, getDics} from '../../../common/js/dictionaries'
  export default {
    components: {
      DefaultLayout,
      ModifySuccess,
      XfPicker,
      HeaderBack},
    data() {
      return {
        form: {
          declarationBaseId: '', // 缴费基数
          description: '' // 备注
        },
        list: {},
        userInfo: {},
        decla: [], // 缴费基数字典表
        status: 'form'
      }
    },
    methods: {
      getDics() {
        getDics(dics.decla).then(res => {
          this.decla = res[0]
        })
      },
      onSubmit() {
        validate.call(this, this.form).then(() => {
          if (!this.form.description) {
            this.$message.toast('备注不能为空')
            return
          }
          this.$post('/admin/person/sapi/socialsecurity/declarationBase/post', this.form, loading => {
            this.$message.loading(loading)
          }).then(res => {
            this.status = 'success'
          })
        })
      }
    },
    mounted () {
      this.getDics()
    },
    created() {
      this.userInfo = this.$store.state.userInfo
    }
  }
</script>
<style lang="scss" scoped>
  @import "../../../common/style/variable";
  .form{
    margin: .15rem 0 0 0;
  }
  .next{
    padding: .2rem 0;
  }
</style>
